<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当前用户xiaoMing</title>
</head>
<style>
    #message{
        width: 50%;
        height: 500px;
        border: 1px solid black;
        background-color: darkgray;

    }

    #inputVal{
        width: 50%;
    }
    input{
        width: 92%;
    }
</style>
<body>
<h1>当前用户xiaoMing</h1>
<div id="message">

</div>
<div id="inputVal">
    <input type="text" name="text">
    <button onclick="send()">发送</button>
</div>

<script>
    var messageEl=document.getElementById("message");
    var inputEl=document.getElementsByTagName("input")[0];
    var websocket=null;
    if('WebSocket' in window){
        websocket=new WebSocket("ws:localhost:8081/websocket/12");
    }else {
        alert("浏览器不支持");

    }
    websocket.onopen=function () {
        console.log("webscoket已经连接成功");
        addMessage("webscoket已经连接成功");

    };
    websocket.onclose=function () {
        console.log("webscoket连接失败");
        addMessage("webscoket连接失败");
    };
    websocket.onmessage=function (event) {
        addMessage(event.data);
    };
    websocket.onerror=function () {
        console.log("webscoket连接失败");
        addMessage("webscoket连接失败");
    };
    function addMessage(message) {
        messageEl.innerHTML+=message+"</br>";
    }

    function send() {
        websocket.send("xiaoMing:"+inputEl.value);
        messageEl.innerHTML+="我:"+inputEl.value+"</br>";
    }


</script>

</body>
</html>